<!DOCTYPE html>
<html dir="ltr">
  <head>
    <title>BIDI</title>
    <meta charset="utf-8" />
    <script>
      jQuery = function (a) {
        return document.querySelector(a);
      };
      jQuery.all = function (s) {
        return document.querySelectorAll(a);
      };
      $ = jQuery;
    </script>
    <style>
      body {
        font-size: 18px;
        padding: 2em;
      }
      .outer {
        text-align: center;
      }
      .target,
      .source {
        width: 100%;
        height: 260px;
        box-sizing: border-box;
        padding: 0.8em;
      }
      .source {
        direction: rtl;
      }
      .target {
        text-align: right;
      }
      .convert {
        width: 260px;
        margin: 10px;
        height: 2em;
      }
      .desc {
        max-width: 50em;
        background-color: #eee;
        padding: 1.2em;
        margin: 20px auto;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="source-outer">
        <textarea class="source">مرحبا العالم</textarea>
      </div>
      <button class="convert">Convert</button>
      <div class="target-outer">
        <textarea class="target"></textarea>
      </div>
    </div>

    <div class="desc">
      BIDI：用于转换阿拉伯语等由右到左的排版顺序。<br />
      <ol>
        <li>将待转化字符粘贴到上方输入框；</li>
        <li>点击Convert；</li>
        <li>复制下方输入框内容到不支持不支持排版顺序的地方即可。</li>
      </ol>
      PS：多行数据，请自行换行。换行时可以通过搜索行尾字符进行定位。<br />
      PPS：由右到左和由左到右混排的情况，会出现混乱，请在转换后自行修改。
    </div>
    <script>
      document.querySelector(".convert").onclick = function () {
        var s = $(".source").value;
        var t = s.split("").reverse().join("");
        t = t.split("\n").reverse().join("\n");
        $(".target").value = t;
      };
    </script>
  </body>
</html>
